<template>
  <PageWrapper class="ztable" contentFullHeight>
    <vxe-grid ref='xGrid' v-bind="gridOptions">
      <template #tbtns>
        <span style="color: #0915f1;margin-left: 2px;margin-right: 10px;display: inline-block">表名：{{table.name}}</span>
        <vxe-input v-model="formData.name" placeholder="输入名称查询"></vxe-input>
        <vxe-button @click="searchEvent" status="primary">查 询</vxe-button>
        <vxe-button @click="addEvent({tableid:tableid},openDrawer)">新 增</vxe-button>
        <vxe-button @click="deleteEvent($refs.xGrid)">删 除</vxe-button>
      </template>
      <template #name_default="{ row }">
          <span style="cursor:pointer;color: #3e9ece"
                @click="editEvent({id:row.id},openDrawer)">{{ row.name }}</span>
      </template>
    </vxe-grid>
    <FieldDrawer @register="registerDrawer" @success="handleSuccess"/>
  </PageWrapper>
</template>
<script lang="ts">
export default {name: 'BiFieldMain', inheritAttrs: false}
</script>
<script lang="ts" setup>
import {PageWrapper} from '/@/components/Page';
import {onMounted, reactive, ref} from 'vue'
import {VxeGridInstance, VxeGridProps} from 'vxe-table'
import FieldDrawer from './FieldDrawer.vue';
import {useDrawer} from '/@/components/Drawer';
import {deleteEvent, addEvent, editEvent, createOption} from '/@/comps/vxe/list';
import { useRoute } from 'vue-router';
import {defHttp} from "/@/utils/http/axios";
const route = useRoute();
const tableid = ref(route.params?.id);
const table = ref({});

async function fetch() {
  table.value = await defHttp.get({url: '/bi/table/main/one/' + tableid.value});
}


const xGrid = ref({} as VxeGridInstance)
const formData = reactive({name: '',tableid})

const gridOptions = reactive<VxeGridProps>(createOption('/bi/field/main', {}, formData, [
  {type: 'checkbox', align: 'center', width: 42, fixed: 'left'},
  {type: 'seq', align: 'center', width: 50, fixed: 'left'},
  {field: 'name', title: '字段名', width: 150, fixed: 'left', slots: {default: 'name_default'}},
  {field: 'comet', title: '注释',width: 200},
  {field: 'notes', title: '其他说明'},
  { field: "crtim", title: "创建时间", width: 150 },
  { field: "crman", title: "创建人", width: 65 },
  { field: "uptim", title: "修改时间", width: 150 },
  { field: "upman", title: "修改人", width: 65 },
]));

const searchEvent = () => {
  xGrid.value.commitProxy('query')
}

onMounted(() => {
  fetch();
});

//--------------------------------------------------------------------------------------------------
const [registerDrawer, {openDrawer}] = useDrawer();

function handleSuccess() {
  searchEvent();
}
</script>

